<!DOCTYPE html>

<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="rogepi" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/vue.global.js"></script>
    <title>1-basic-event</title>
  </head>

  <body>
    <!-- 使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，
    并在触发事件时执行一些 JavaScript。
    用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName" -->
    <div id="basic-event">
      <button @click="counter++">Add 1</button>
      <p>THe button above has been clicked {{counter}}</p>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            counter: 1,
          };
        },
      }).mount('#basic-event');
    </script>
  </body>
</html>
